<template>
  <div class="admin">
    <div class="login">
      <a-spin tip="Loading..." :spinning="isLoading">
        <a-card title="😀 ayong の blog System" :bordered="false" style="width: 400px">
          <a-input placeholder="Enter your userName" size="large" v-model="user.userName">
            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,0.25)" />
          </a-input>
          <br />
          <br />
          <a-input-password placeholder="Enter your password" size="large" v-model="user.password">
            <a-icon slot="prefix" type="key" style="color:rgba(0,0,0,0.25)" />
          </a-input-password>
          <br />
          <br />
          <a-button type="primary" size="large" block @click="onClick">登录</a-button>
        </a-card>
      </a-spin>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      isLoading: false,
    };
  },
  methods: {
    async onClick() {
      this.isLoading = true;
      if (!this.user.userName) {
        this.$message.error("用户名不能为空");
        this.isLoading = false;
        return false;
      } else if (!this.user.password) {
        this.$message.error("密码不能为空");
        this.isLoading = false;
        return false;
      }
      let res = await this.$http({
        method: "POST",
        url: "/admin/checkLogin",
        data: this.user,
      });
      if (res.data.data == "登录成功") {
        window.localStorage.setItem("token", res.data.token);
        this.$router.push({
          path: "/welcome",
        });
      } else {
        this.$message.error("用户名密码错误");
        this.isLoading = false;
      }
    },
  },
};
</script>

<style lang="less">
.admin {
  height: 100vh;
  margin: 0;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400%, 400%;
  animation: gradientBG 15s ease infinite;
  .login {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@keyframes gradientBG {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.ant-spin-nested-loading {
  .ant-spin-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .ant-card {
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.5);
    }
  }
}
</style>